<template>
  <el-dialog :title="title" :visible.sync="showPdf" @close="cancel" width="80%" append-to-body>
    <div id="pdf-viewer"></div>
  </el-dialog>

</template>

<script>
// import * as pdfjsLib from 'pdfjs-dist';
import { getFjById } from '@/api/gd/fj'

export default {
  name: 'ExcelPreView',
  props: {
    title: {
      type: String
    },
    showPdf: {
      type: Boolean
    },
    form: {
      type: Object
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    async init() {
      debugger
     const response = getFjById(this.form.fjpdf)
      // 使用 PDF.js 加载文件流
      const typedArray = new Uint8Array(response.data);
      const pdfBlob = new Blob([typedArray], { type: 'application/pdf' });

      // 创建PDF加载器
      const loadingTask = pdfjsLib.getDocument({ data: pdfBlob });
      loadingTask.promise.then(pdf => {
        // 创建PDF阅读器容器
        const container = document.getElementById('pdf-viewer');
        const viewer = new pdfjsLib.PDFViewer({
          container,
          // 其他配置选项...
        });

        // 设置文档
        viewer.setDocument(pdf);

        // 显示第一页
        viewer.currentPageNumber = 1;
      });

    },
    cancel() {

    }
  }
}
</script>

<style scoped>

</style>
